/**
 * Created by zhouxin on 2019/5/19.
 * @description: 用于所有echarts的方法
 */
import {Injectable} from '@angular/core';
import * as echarts from 'echarts';
import {DatePipe} from '@angular/common';

@Injectable({
  providedIn: 'root'
})
export class EchartsService {
  // 视图原图比
  scall = 1;

  constructor(private datePipe: DatePipe) {
    window.onresize = () => {
      this.scall = window.innerWidth / 1920;
    };
    this.scall = window.innerWidth / 1920;
  }

  /**
   * @method setDom 设置画图节点
   * @param dom 画图节点
   * @param option 画图数据
   * @param isClear 视图是否重画，默认为true
   */
  setDom(dom, option, isClear) {
    // 根据dom获取页面中Id为dom（值）的节点，并形成画图对象
    const myChart = echarts.init(document.getElementById(dom));
    // 清除已经划过的对象图形
    if (isClear) {
      myChart.clear();
    }
    // 画图
    myChart.setOption(option);
    // 监听屏幕变化并改变图的展现形式
    window.addEventListener('resize', () => {
      myChart.resize();
    });
  }

  /**
   * @method setChartView 设置视图区域
   * @param data 画图数据{left: '',right: '',bottom: '',top:'',containLabel: true}
   */
  setChartView(data) {
    // data配置相应的信息不存在返回默认配置
    return data ? {
      // 视图左界限
      left: data.left,
      // 视图右界限
      right: data.right,
      // 视图底部界限
      bottom: data.bottom,
      // 视图顶部界限
      top: data.top,
      containLabel: true
    } : {
      left: '2%',
      right: '2%',
      bottom: '2%',
      top: '5%',
      containLabel: true
    };
  }

  /**
   * @method 课堂 报告-成绩统计柱状图
   * @param dom 画图节点
   * @param yData 图像展示数据{xData:[],yData:[],name:'',title:''}}
   */
  baseBarChart(dom, xData, yData) {
    const option = {
      color: ['#3398DB'],
      tooltip: {
        trigger: 'axis',
        axisPointer: {            // 坐标轴指示器，坐标轴触发有效
          type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
        }
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      xAxis: [
        {
          type: 'category',
          data: yData,
          axisTick: {
            alignWithLabel: true
          }
        }
      ],
      yAxis: [
        {
          type: 'value',
          splitLine: {
            show: true,
            lineStyle: {
              type: 'dashed'
            }
          }
        }
      ],
      series: [
        {
          name: '人数',
          type: 'bar',
          barWidth: '60%',
          data: xData
        }
      ]
    };
    this.setDom(dom, option, true);
  }


  /**
   * @method 多色条
   * @param dom 画图节点
   * @param yData 图像展示数据{xData:[],yData:[],name:'',title:''}}
   */
  marnBar(dom, title, rotate, xdata, yData) {
    let seriesInfo = [];
    let colorInfo = [];
    let legendInfo = [];
    yData.forEach(item=>{
      colorInfo.push(item.color);
      legendInfo.push(item.name);
      seriesInfo.push({
        name: item.name,
        type: 'bar',
        barGap: .1,
        data: item.data
      });
    });
    const option = {
      title: {
        left: '0',
        text: title,
        textStyle: {
          color: '#fff',
          fontSize: 15,
        },
        padding: 5,
        backgroundColor: '#009788'
      },
      color: colorInfo,
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow'
        }
      },
      dataZoom: [{
        show: false,
        type: 'slider',
        bottom: '20',
        xAxisIndex: 0,
        filterMode: 'empty'
      }],
      grid: {
        top: '40',
        left: '27',
        right: '27',
        bottom: '0',
        containLabel: true
      },
      legend: {
        data: legendInfo
      },
      xAxis: [{
        type: 'category',
        axisTick: {
          show: false
        },
        axisLabel: {
          rotate: rotate
        },
        data: xdata
      }],
      yAxis: [{
        type: 'value'
      }],
      series: seriesInfo
    };
    const chart = echarts.init(document.getElementById(dom));
    chart.clear();
    chart.setOption(option);
    window.addEventListener('resize', function() {
      chart.resize();
    });
  };
}
